<template>
  <div id="app">
    <!-- 导航栏 -->
    <div class="app-nav">
      <div class="content">
        <router-link to="/">
          <div class="logo">
            <img src="@/assets/logo.png">
          </div>
        </router-link>
        <router-link to="/">
          <div class="title active">
            自助功能
          </div>
        </router-link>
        <div class="title">
          提交反馈
        </div>
        <div class="title">
          立得实验室
        </div>
        <div class="title sm" style="margin-left:auto">
          支持我
        </div>
        <div class="title sm">
          <a href="https://gitee.com/jialeyang/lidedesign" target="_blank">Gitee</a>
        </div>
      </div>
    </div>
    <!-- 路由出口 -->
    <div class="app-routerview">
      <transition :name="$route.path == '/' ? 'slide-right' : 'slide-left'" mode="out-in">
        <router-view/>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    
  }
}
</script>

<style lang="scss">
  $min-width: 1250px;

  * {
    padding: 0;
    margin: 0;
    color: #202124;
    ::selection {
      color: #fff;
      background: rgb(188,192,196);
    }
    a, a:hover {
      text-decoration: none;
    }
  }

  body {
    background: #f5f7fa;
  }

  #app {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .app-nav {
    width: 100%;
    height: 60px;
    background: #ffffff;
    box-shadow: #00296e1a 0px 2px 20px 0px;
    z-index: 10;
    .content {
      display: flex;
      width: $min-width;
      height: 100%;
      margin: 0 auto;
      .logo {
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 30px;
        img {
          width: 94.75px;
        }
      }
      .title {
        display: flex;
        align-items: center;
        margin: 0 13px;
        height: 100%;
        font-size: 18px;
        transition: all .2s ease-in-out;
        &.sm {
          font-size: 16px;
        }
        &:hover {
          cursor: pointer;
          color: #0160fe;
        }
        &.active {
          color: #0160fe;
        }
      }
      .icon {
        display: flex;
        align-items: center;
        margin-left: 20px;
        font-size: 24px;
        color: #53565a;
        &:hover {
          color: #2c2e30;
          cursor: pointer;
        }
      }
    }
  }

  .app-routerview {
    width: 100%;
    overflow: hidden;
  }

  .slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }

  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-right-enter-active{
    transition: all .5s ease;
  }
  .slide-right-leave-to{
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-right-leave-active {
    transition: all .5s ease;
  }
</style>